<template>
  <Form :model="formState" v-bind="formItemLayout" ref="formRef" name="BasicForm">
    <FormItem name="resourceType" label="资源类型" :rules="[{ required: true, message: '请选择资源类型' }]">
      <Select v-model:value="formState.resourceType">
        <SelectOption v-for="option in resourceOptionList" v-bind:key="option.value" :value="option.value"
          >{{ option.description }}
        </SelectOption>
      </Select>
    </FormItem>

    <FormItem name="dimension" label="维度">
      <Select v-model:value="formState.dimension">
        <SelectOption v-for="option in dimensionOptionList" v-bind:key="option.value" :value="option.value"
          >{{ option.description }}
        </SelectOption>
      </Select>
    </FormItem>

    <FormItem name="monitoringScope" label="监控范围" :rules="[{ required: true, message: '请选择监控范围' }]">
      <RadioGroup v-model:value="formState['monitoringScope']">
        <RadioButton value="ALL_INSTANCE">全部资源</RadioButton>
        <RadioButton value="MULTI_INSTANCE">指定资源</RadioButton>
      </RadioGroup>
    </FormItem>

    <FormItem v-if="multiple" name="resources" label="资源列表" :rules="[{ required: true, message: '请选择资源' }]">
      <Select v-model:value="formState.resources" mode="multiple">
        <SelectOption v-for="option in resourceListOptionList" v-bind:key="option.value" :value="option.value">
          {{ option.description }}
        </SelectOption>
      </Select>
    </FormItem>

    <div v-if="formState.resourceType && formState.dimension">
      <FormItem name="policies" label="告警策略">
        <ThresholdCustomTable
          ref="tableRef"
          v-model:value="formState.policies"
          :dimension="formState.dimension"
          :resourceType="formState.resourceType"
        ></ThresholdCustomTable>
      </FormItem>
    </div>
  </Form>
</template>

<script lang="ts" setup>
import { Form, FormItem, RadioGroup, RadioButton, Select, SelectOption } from 'ant-design-vue';
import { nextTick, onMounted, ref, toRaw, watch } from 'vue';
import { getDimension, getNamespace, getResourceList } from '/@/api/maintenance-center/alarm/alarm';
import ThresholdCustomTable from '/@/views/maintenance-center/alarm-rule/new-ces-rule/components/ThresholdCustomTable.vue';

const emit = defineEmits(['submit']);

const formItemLayout = {
  labelCol: { span: 4 },
  labelWidth: 200,
  wrapperCol: { span: 16 },
};

const tableRef = ref();
const multiple = ref(false);
const resourceOptionList = ref([]);
const dimensionOptionList = ref([]);
const resourceListOptionList = ref([]);
const isEdit = ref(false);
const formState = ref<Record<string, any>>({});
const formRef = ref();

onMounted(async () => {
  formState.value = {};
  resourceOptionList.value = await getNamespace();
});

watch(
  () => formState.value.resourceType,
  async () => {
    if (formState.value.resourceType) {
      if (isEdit.value === false) {
        formState.value.dimension = undefined;
        formState.value.monitoringScope = undefined;
      }
      dimensionOptionList.value = await getDimension({ namespace: formState.value.resourceType });
    } else {
      if (isEdit.value === false) {
        formState.value.dimension = undefined;
        formState.value.monitoringScope = undefined;
      }
    }
  },
  { immediate: true }
);

watch(
  () => formState.value.monitoringScope,
  async () => {
    if (
      formState.value.monitoringScope &&
      formState.value.monitoringScope === 'MULTI_INSTANCE' &&
      formState.value.resourceType &&
      formState.value.dimension
    ) {
      multiple.value = true;
      if (isEdit.value === false) {
        formState.value.resources = undefined;
      }
      resourceListOptionList.value = await getResourceList({
        namespace: formState.value.resourceType,
        dimension: formState.value.dimension,
      });
      if (isEdit.value === true) {
        isEdit.value = false;
      }
    } else {
      if (isEdit.value === false) {
        formState.value.resources = undefined;
      }
      multiple.value = false;
    }
  },
  { immediate: true }
);

function getFormValue() {
  return formState.value;
}

async function setFormValue(fieldValue: any) {
  isEdit.value = true;
  formState.value = await fieldValue;
  formState.value.dimension = formState.value.dimensionValue;
  nextTick(() => {
    tableRef.value.setTableData(fieldValue.policies, formState.value.dimensionValue, formState.value.resourceType);
  });
}

function handleSubmit() {
  formRef.value.validate().then(() => {
    formState.value.policies = tableRef.value.getTableData();
    let params = toRaw(formState);
    emit('submit', params);
  });
}

defineExpose({ handleSubmit, getFormValue, setFormValue });
</script>